<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>导航栏</title>
    <style type="text/css">
        ul li {
            list-style: none;
            display: list-item;
        }

        .subnav {
            height: 51px;
            line-height: 51px;
            border-top: 1px solid #e30909;
            padding-left: 230px;
            background-color: #c11136;
        }

        .subnav_item {
            float: left;
            font-size: 15px;
            color: #c1c1c1;
            margin-right: 0px;
        }

        a {
            text-decoration: none;
            padding-left: 10px;
            padding-right: 0px;
            width: 80px;height: 51px;
            display: block;
            border-left: 3px solid white;
        }

        a:focus {
            color: #31c27c;
        }
        a:link, a:visited{  
        background-color:#c11136;  
        color:rgb(205, 166, 29); } 
        a:hover {
            color: #31c27c;
            background-color:#990020; 
            color:#ff0;  
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul class="subnav">
            <li class="subnav_item">
                <a href="#">首页</a>
            </li>
            <li class="subnav_item">
                <a href="#">歌手</a>
            </li>
            <li class="subnav_item">
                <a href="#">新碟</a>
            </li>
            <li class="subnav_item">
                <a href="#">排行榜</a>
            </li>
            <li class="subnav_item">
                <a href="#">分类歌单</a>
            </li>
            <li class="subnav_item">
                <a href="#">电台</a>
            </li>
            <li class="subnav_item">
                <a href="#">MV</a>
            </li>
            <li class="subnav_item">
                <a href="#">数字专辑</a>
            </li>
        </ul>
    </div>
  
</body>
</html>